<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="clear" color="medium" (click)="dismiss()">
                <ion-icon name="close-outline" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>
            {{translate("TEMPLATE_DETAIL")}}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">{{translate("TEMPLATE_DETAIL")}}</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-list>
        <ion-item *ngFor="let item of config.configs">
            <ion-label color="primary" [position]="item.type !== 'feed' ? 'stacked' : ''">
                {{item.type !== 'feed' ? item.label + '-' : ''}}{{translate(item.type.toUpperCase())}}
            </ion-label>
            <ion-input *ngIf="item.type !== 'feed'" [(ngModel)]="item.value"></ion-input>
            <ion-note slot="end" *ngIf="item.type === 'feed'">{{item.lines}} {{translate("LINE")}}</ion-note>
        </ion-item>
    </ion-list>
</ion-content>

<ion-footer>
    <ion-toolbar class="ion-no-padding">
        <ion-grid>
            <ion-row>
                <ion-col size="12">
                    <ion-button color="primary" expand="block" (click)="print()">
                        {{translate("PRINT")}}
                    </ion-button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-toolbar>
</ion-footer>